<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/paper-tooltip/paper-tooltip.html">

<link rel="import" href="account/details-page.html">
<link rel="import" href="account/password-page.html">
<link rel="import" href="account/plans-list.html">
<link rel="import" href="account/subscriptions-list.html">
<link rel="import" href="account/sessions-list.html">
<link rel="import" href="account/tokens-list.html">
<link rel="import" href="account/whitelisted-ips.html">
<link rel="import" href="account/notifications-settings.html">
<link rel="import" href="account/metering-graphs.html">

<script src='../bower_components/moment/min/moment.min.js'></script>

<dom-module id="page-my-account">
    <template>
        <style include="single-page shared-styles">
        #container {
            max-width: 600px;
        }

        paper-tabs {
            background-color: #d3d3d3;
            color: #000;
            --paper-tabs-selection-bar-color: #2196F3;
        }

        iron-pages>* ::slotted(paper-material) {
            padding: 0;
            display: block;
        }

        #content {
            max-width: 900px;
        }

        paper-tab {
            min-width: min-content;
        }
        </style>
        <app-route route="{{route}}" pattern="/:page" data="{{data}}"></app-route>
        <div id="content">
            <paper-tabs attr-for-selected="name" selected="{{data.page}}" scrollable>
                <paper-tab id="profile" name="profile" data-route="0">Profile</paper-tab>
                <paper-tab id="password" name="password" data-route="1">Password</paper-tab>
                <paper-tab id="billing" name="billing" data-route="2" hidden$="[[!_showBilling(org.is_owner, config.features.billing)]]">Billing</paper-tab>
                <paper-tab id="sessions" name="sessions" data-route="3">Active Sessions</paper-tab>
                <paper-tab id="tokens" name="tokens" data-route="4">API Tokens</paper-tab>
                <paper-tab id="ips" name="ips" data-route="5">Whitelisted IPs</paper-tab>
                <paper-tab id="subscriptions" name="subscriptions" data-route="6" hidden$="[[!org.is_owner]]">Subscription History</paper-tab>
                <paper-tab id="notifications" name="notifications" data-route="7">Notifications</paper-tab>
                <paper-tab id="metering" name="metering" data-route="8">Metering</paper-tab>
            </paper-tabs>
            <iron-pages attr-for-selected="name" selected="{{data.page}}">
                <details-page config=[[config]] name="profile" org="[[org]]" user="[[user]]" data-route="0"></details-page>
                <password-page name="password" user="[[user]]" data-route="1"></password-page>
                <plans-list name="billing" org="[[org]]" data-route="2" hidden$="[[!org.is_owner]]" email=[[config.email]]></plans-list>
                <sessions-list name="sessions" org="[[org]]" user="[[user]]" data-route="3"></sessions-list>
                <tokens-list name="tokens" org="[[org]]" user="[[user]]" data-route="4"></tokens-list>
                <whitelisted-ips name="ips" user="[[user]]" data-route="5"></whitelisted-ips>
                <subscriptions-list name="subscriptions" org="[[org]]" data-route="6" hidden$="[[!org.is_owner]]"></subscriptions-list>
                <notifications-settings name="notifications" machines="[[machines]]" data-route="7"></notifications-settings>
                <metering-graphs name="metering" org="[[org]]" user="[[user]]" data-route="8" hidden$="[[!org.is_owner]]" email=[[config.email]]></metering-graphs>
            </iron-pages>
        </div>
    </template>
    <script>
    Polymer({
        is: 'page-my-account',
        properties: {
            config: {
                type: Object
            },
            user: {
                type: Object
            },
            org: {
                type: Object
            },
            machines: {
                type: Object
            },
            tokens: {
                type: Array
            },
            sessions: {
                type: Array
            },
            location: {
                type: Object
            },
            data: {
                type: Object,
                value: function() {
                    return { page: 'profile' };
                }
            }
        },
        _showBilling: function(is_owner, has_billing) {
            return is_owner && has_billing;
        }
    });
    </script>
</dom-module>